<!--
 * @Author: boBrother
 * @Date: 2022-01-05 14:54:20
 * @LastEditTime: 2022-01-06 14:56:52
 * @LastEditors: HaoDong
 * @Description: 
 * @FilePath: \am-dashboard\src\pages\government\components\Bottom2.vue
 * 别乱动！
-->
<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:36
-->
<template>
  <div id="bottom_2_container" style="height:100%;">

  </div>
</template>

<script>
import { get } from "@/utils/request.js";
import { Liquid } from "@antv/g2plot";
export default {
  data() {
    return {
      deviceData: [],
      params: {
        page: 1,
        pageSize: 50
      },
      chart: null
    };
  },
  computed: {
    chartData() {
      return this.deviceData.map(item => {
        return parseFloat(item.noise) / 90;
      });
    }
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Liquid("bottom_2_container", {
        percent: parseFloat(this.chartData),
        shape: "diamond",
        outline: {
          border: 1,
          distance: 0
          // style: {
          //   stroke: "blue"
          // }
        },
        wave: {
          length: 100
        },
        liquidStyle: {
          lineOpacity: 0.5
        },
        statistic: {
          title: "噪音监测"
        }
      });

      this.chart.update({
        theme: {
          styleSheet: {
            brandColor: "#215B77",
            paletteQualitative10: [
              "#215B77",
              "#1B9CD0",
              "#61C9FF",
              "#ABDFFF",
              "#EFF3DE",
              "#FFDE94",
              "#FFC741",
              "#D09C10",
              "#795B16"
            ],
            paletteQualitative20: [
              "#215B77",
              "#227BA2",
              "#1B9CD0",
              "#22BAED",
              "#61C9FF",
              "#8AD4FF",
              "#ABDFFF",
              "#C9E9FF",
              "#EFF3DE",
              "#FFE9B8",
              "#FFDE94",
              "#FFD470",
              "#FFC741",
              "#EDB40A",
              "#D09C10",
              "#A37B16",
              "#795B16"
            ]
          }
        }
      });
      this.chart.render();
    },

    getQueryRealData() {
      get("/dashboard/pageQueryData", {
        ...this.params,
        device_id: 28
      }).then(res => {
        this.deviceData = res.data.list;
        this.initChart();
      });
    }
  },
  mounted() {
    this.getQueryRealData();
    setInterval(() => {
      this.getQueryRealData();
    }, 6000);
  }
};
</script>


